import FilterComponentOptions from "./FilterComponentOptions";

export default class FilterComponent extends React.Component {
    render() {
        return null
    }
    componentWillReceiveProps(nextProps) {
        const { visible } = nextProps;
        if (visible) {
            this.showFilter(nextProps);
        } else {
            this.hideFilter(nextProps);
        }
    }
    showFilter = (props) => {
        if (!this.filterDiv) {
            this.filterDiv = document.createElement('div');
            document.body.appendChild(this.filterDiv);
        }
        const { top, left, width } = props;
        $(this.filterDiv).css({
            position: 'absolute',
            top,
            left,
            width,
            minWidth: 400,
            display: 'block',
            zIndex: 1000
        }).addClass('edc-data-list-filter');
        // .mouseleave(() =>{
        //     this.hideFilter()
        // });
        ReactDOM.render(<FilterComponentOptions
            options={props.options}
            hideFilter={this.hideFilter}
            onFilter={this.onFilter}
            onChange={this.onChange}
            loading={props.loading}
            value={props.filterValue}
            sortType={props.sortType}
            changeAsc={this.changeAsc}
            changeDesc={this.changeDesc}
            quickSearch={props.quickSearch}
            quickSearchValue={props.quickSearchValue}
            indeterminate={props.indeterminate}
            onCheckAllChange={props.onCheckAllChange}
            checkAll={props.checkAll}
            changeSearch={props.changeSearch}
            isSearch={props.isSearch}
            isShowAdSearch={props.isShowAdSearch}
        />, this.filterDiv)
    }
    hideFilter = () => {
        $(this.filterDiv).hide();
        //this.props.hideFilter && this.props.hideFilter();
    }
    onFilter = () => {
        this.props.onFilter && this.props.onFilter();

        this.hideFilter();
    }

    onChange = (e, f) => {
        this.props.onChange && this.props.onChange(e);
    }


    changeAsc = () => {
        this.props.changeSort && this.props.changeSort('ascend');

        this.hideFilter();
    }

    changeDesc = () => {
        this.props.changeSort && this.props.changeSort('descend');

        this.hideFilter();
    }
}